<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.searchKey"
        placeholder="名称"
        style="width: 200px"
        class="filter-item"
      />
      <el-select
        v-model="listQuery.sortKey"
        style="width: 140px"
        class="filter-item"
      >
        <el-option
          v-for="item in sortOptions"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="searchAndSort"
      >
        查找
      </el-button>
      <el-button
        v-if="checkPermission(['仪器信息：创建'])"
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="$router.push(`/machine/create`)"
      >
        新增
      </el-button>
    </div>

    <div class="list-main-container">
      <el-row v-if="!checkPermission(['仪器信息：更新'])">
        <el-col :span="4" v-for="item in list" :key="item.id" :offset="1">
          <div
            class="card-container"
            @click="$router.push(`/machine/view/${item.id}`)"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img :src="item.machinePhotoPath" class="image" />
              <div class="card-description" style="padding: 14px">
                <span>{{ item.machineName }}</span>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>

      <el-table
        v-if="checkPermission(['仪器信息：更新'])"
        :key="tableKey"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        @sort-change="sortChange"
      >
        <el-table-column
          label="序列号"
          prop="id"
          sortable="custom"
          align="center"
          width="100"
          :class-name="getSortClass('idNumber')"
        >
          <template slot-scope="{ row }">
            <span>{{ row.idNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仪器名称" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.machineName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仪器介绍" min-width="100px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.machineContent }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="img" label="仪器图片" width="200" align="center">
          <template slot-scope="{ row }">
            <img
              :src="row.machinePhotoPath"
              style="height: 2.8rem"
            />
          </template>
        </el-table-column>
        <el-table-column label="联系人姓名" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.machineOwnerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人电话" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.machineOwnerPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系人邮箱" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.machineOwnerEmail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="仪器状态" min-width="50px" align="center">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.machineStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="230"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button
              size="mini"
              type="success"
              @click="$router.push(`/machine/view/${row.id}`)"
            >
              查看
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="$router.push(`/machine/edit/${row.id}`)"
            >
              编辑
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { findAll } from "@/utils";
import Pagination from "@/components/Pagination";
import { fetchMachineList, deleteMachine } from "@/api/machine";
import {checkPermission} from '@/utils/permission'

export default {
  name: "machineList",
  components: { Pagination },
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
  },
  data() {
    return {
      tableKey: 0,
      totalList: null,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        pageIndex: 1,
        limit: 10,
        searchField: "machineName",
        searchKey: "",
        sortField: "idNumber",
        sortKey: "asce",
      },
      sortOptions: [
        { label: "序列号 升序", key: "asce" },
        { label: "序列号 降序", key: "desc" },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      fetchMachineList().then((res) => {
        this.totalList = res.data.map((item, index) => {
          item.idNumber = index + 1;
          return item;
        });
        this.handleFilter();

        this.listLoading = false;
      });
    },
    handleFilter() {
      const result = findAll(this.totalList, this.listQuery);
      this.list = result.data;
      this.total = result.total;
    },
    searchAndSort() {
      this.listQuery.pageIndex = 1;
      this.handleFilter();
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      if (order === "ascending") {
        this.listQuery.sortKey = "asce";
      } else {
        this.listQuery.sortKey = "desc";
      }
      this.listQuery.pageIndex = 1;
      this.handleFilter();
    },
    handleDelete(row, index) {
      this.$confirm(`是否确定删除 "${row.machineName}"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        //请求接口
        deleteMachine(row.id)
          .then((res) => {
            if (res.data) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新获取
              this.getList();
            } else {
              this.$message({
                message: "角色删除失败",
                type: "error",
              });
            }
          })
          .catch((err) => {
            this.$message({
              message: "角色删除失败",
              type: "error",
            });
          });
      });
    },
    getSortClass: function (key) {
      const sort = this.listQuery.sortKey;
      return sort === `asce` ? "ascending" : "descending";
    },
  },
};
</script>
<style>
.list-main-container {
  padding: 30px 0;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  height: 200px;
  width: 100%;
  display: block;
}

.card-description {
  height: 80px;
}

.card-container {
  margin-bottom: 20px;
}

.card-container:hover {
  cursor: pointer;
}
</style>
